import React from 'react';
import { cn } from '@/lib/utils';

// 云纹铜禁的模拟数据
const cloudPatternBronzeJinData = {
  title: "云纹铜禁",
  subtitle: "用失蜡法编织的“青铜蕾丝”",
  imageDescription: "铜梗层层叠叠，如云朵缭绕，神兽攀附，像一件巨大的“青铜镂空雕塑”",
  basicInfo: {
    age: "春秋时期",
    material: "青铜",
    size: "长107厘米，宽47厘米",
    feature: "整体用失蜡法铸造成型，纹饰复杂精巧",
    exhibitionHall: "4楼13展厅",
    amazingFeature: "它的铸造工艺——失蜡法，领先世界一千多年！"
  },
  function: "承放酒器的案台，名为“禁”，也含有警示戒酒之意。",
  values: [
    {
      title: "工艺巅峰",
      description: "将中国失蜡法铸造技术的历史提前了1100年"
    },
    {
      title: "结构复杂",
      description: "由数十个零件一次铸成，至今仍是铸造界的奇迹"
    },
    {
      title: "造型奇幻",
      description: "整体通透玲珑，充满神秘气息，是想象力与技术的完美结合"
    }
  ],
  studentTask: "找找看，有多少只小怪兽在这片“云朵”里钻来钻去？",
  introduction: "我可是青铜界的“镂空大师”，看着复杂吧？这可是我一口气“长”出来的！"
};

// 云纹铜禁页面组件
export default function CloudPatternBronzeJinPage() {
  return (
    <div className="max-w-3xl mx-auto bg-white p-4 md:p-6 shadow-sm">
      {/* 顶部横幅区域 */}
      <header className="bg-gradient-to-r from-gray-700 to-slate-800 text-white rounded-t-lg p-4 mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-2xl md:text-3xl font-bold mb-1">{cloudPatternBronzeJinData.title}</h1>
            <p className="text-gray-200">{cloudPatternBronzeJinData.subtitle}</p>
          </div>
          <div className="bg-white/20 rounded-full px-3 py-1 text-sm backdrop-blur-sm">
            可打印版本
          </div>
        </div>
      </header>

      {/* 主要内容区域 */}
      <main className="space-y-8">
        {/* 文物图片与基本档案区 */}
        <section className="flex flex-col md:flex-row gap-6">
          {/* 文物图片 */}
          <div className="md:w-1/3 flex flex-col items-center">
            <div className="bg-gray-50 w-full aspect-square rounded overflow-hidden flex items-center justify-center mb-2">
               <img 
  src="https://lf-code-agent.coze.cn/obj/x-ai-cn/279122722562/attachment/9_20250926161406.jpg" 
  alt="云纹铜禁" 
                className="w-full h-full object-cover p-0"
              />
            </div>
            <p className="text-sm text-gray-600 text-center italic">
              ▲ {cloudPatternBronzeJinData.imageDescription}
            </p>
          </div>

          {/* 基本档案 */}
          <div className="md:w-2/3 bg-gray-50 border-l-4 border-gray-500 p-4">
            <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
              <span className="bg-gray-200 text-gray-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
                ■
              </span>
              基本档案
            </h2>
            <ul className="space-y-2 text-sm text-gray-700">
              <li className="flex">
                <span className="font-medium w-20">年代：</span>
                <span>{cloudPatternBronzeJinData.basicInfo.age}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">材质：</span>
                <span>{cloudPatternBronzeJinData.basicInfo.material}</span>
              </li>
              <li className="flex"> 
                <span className="font-medium w-20">尺寸：</span>
                <span>{cloudPatternBronzeJinData.basicInfo.size}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">特色：</span>
                <span>{cloudPatternBronzeJinData.basicInfo.feature}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">展厅：</span>
                <span>{cloudPatternBronzeJinData.basicInfo.exhibitionHall}</span>
              </li>
              <li className="flex">
                <span className="font-medium w-20">神奇之处：</span>
                <span className="font-semibold text-gray-700">{cloudPatternBronzeJinData.basicInfo.amazingFeature}</span>
              </li>
            </ul>
          </div>
        </section>

        {/* 它是干什么的？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-2 flex items-center">
            <span className="bg-gray-100 text-gray-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            它是干什么的？
          </h2>
          <p className="text-gray-700 pl-7">{cloudPatternBronzeJinData.function}</p>
        </section>

        {/* 为什么这么珍贵？ */}
        <section>
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-gray-100 text-gray-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ▼
            </span>
            为什么这么珍贵？
          </h2>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {cloudPatternBronzeJinData.values.map((value, index) => (
              <div key={index} className="bg-gray-50 p-4 rounded-lg border border-gray-100">
                <h3 className="font-bold text-gray-800 text-sm mb-1 flex items-center">
                  <span className="text-gray-500 mr-1">✔</span>
                  {value.title}
                </h3>
                <p className="text-xs text-gray-700">{value.description}</p>
              </div>
            ))}
          </div>
        </section>

        {/* 幽默自我介绍 */}
        <section className="bg-gray-50 p-4 rounded-lg border-l-4 border-gray-300 mt-4">
          <p className="text-gray-700 italic text-sm">{cloudPatternBronzeJinData.introduction}</p>
        </section>

        {/* 观察任务区 */}
        <section className="mt-8">
          <h2 className="text-lg font-bold text-gray-800 mb-3 flex items-center">
            <span className="bg-gray-100 text-gray-800 rounded-full w-5 h-5 flex items-center justify-center mr-2 text-xs">
              ◇
            </span>
            观察任务
          </h2>
          
          <div className="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
            <h3 className="font-bold text-yellow-800 text-sm mb-2">给小学生的观察任务：</h3>
            <p className="text-gray-700 text-sm mb-4">{cloudPatternBronzeJinData.studentTask}</p>
            
            <textarea 
              className="w-full border border-dashed border-gray-300 rounded p-3 min-h-[100px] text-sm"
              placeholder="我的发现(在这里写下你的观察):"
            ></textarea>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="mt-8 text-center text-xs text-gray-500 pb-4">
        <p>石头妈妈-河南博物院 · 文物教育系列 · 适合打印学习</p>
      </footer>
    </div>
  );
}